<script>
// import { Column, dels } from '@/api/system/api'
import axios from 'axios'
import item from '@/layout/components/Sidebar/Item.vue'
import log from '@/views/monitor/job/log.vue'
import { addColumn, Column, delColumn, setColumn } from '@/api/system/api'

export default {
  // name: 'index',
  data() {
    return {
      dialogVisible_two: false,
      dialogVisible: false,
      tableData: [],
      sortW: '',
      nameW: '',
      sortS:"",
      nameS:"",
      id:""
    }
  },

  created() {
    this.ColumnList()
  },
  methods: {
    setUp(row) {
      this.dialogVisible_two = true
      this.id=row.id
    },
    // 编辑
    update(){
      this.dialogVisible_two = false
      setColumn({
        id:this.id,
        enable:"是",
        sort:this.sortS,
        name:this.nameS
      }).then(res=>{

        this.ColumnList()
      })
    },
    handleClose_two(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    addSlass() {
      this.dialogVisible = false
      addColumn({
        name: this.nameW,
        sort: this.sortW
      }).then(res => {

        this.ColumnList()
      })
    },
    add() {
      let obj = {
        sort: this.sortW,
        name: this.nameW,
        updateTime: `${new Date().getFullYear()}-${(new Date().getMonth() + 1).toString().padStart(2, '0')}-${new Date().getDate().toString().padStart(2, '0')}${new Date().getHours()}:${new Date().getMinutes().toString().padStart(2, '0')}:${new Date().getSeconds().toString().padStart(2, '0')}`
      }
      this.tableData.push(obj)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    handleClick(row) {

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        delColumn(row.id)
        this.ColumnList()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    ColumnList() {
      Column().then(res => {
        this.tableData = res.rows

      })
    }
  },
  mounted() {
    this.ColumnList()
  }
}
</script>

<template>
  <div>
    <!--  添加-->
    <div>
      <el-button type="text" @click="dialogVisible = true">
        <button class="btnContent">添加</button>
      </el-button>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <div style="margin-bottom: 30px;margin-right: 3px"><span>排序:</span><input type="text" v-model="sortW"><br>
          </div>
          <div><span>名称:</span><input type="text" v-model="nameW"></div>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSlass">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <!--  表格-->
    <div class="title">
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="sort"
            label="排序"
            width="336" align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="" align="center"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="446" align="center"
          >
          </el-table-column>
          <el-table-column
            prop="action"
            label="操作"
            width="332" align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="setUp(scope.row)">
                <el-button type="text" size="small">编辑</el-button>
              </el-button>
              <el-button @click="handleClick(scope.row)" type="text" size="small">
                <template>
                  <el-button type="text">删除</el-button>
                </template>
              </el-button>
              <!--              <el-button type="text" size="small">编辑</el-button>-->

              <el-dialog
                title="提示"
                :visible.sync="dialogVisible_two"
                width="30%"
                :before-close="handleClose_two"
              >
                <div>
                  <div><span style="margin-left: -25px;margin-right: 10px" >栏目名称:</span><input type="text" v-model="nameS" class="int_one"></div>
                  <div><span>排序:</span><input type="text" v-model="sortS" class="int_two"></div>
                </div>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible_two = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>                                                   0

<style scoped lang="scss">
.int_one, .int_two{
  outline: none;

}
.int_one{
  margin-bottom: 30px;
  margin-left: -10px;
}
.btnContent {
  margin-left: 29px;
  margin-top: 54px;
  margin-bottom: 30px;
  border: none;
  border-radius: 4px;
  background-color: rgba(24, 146, 255, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
}

input {
  outline: none;
}
</style>
